<template>
	<view class="btn" :class="{'plain':plain,'noBorder':!border||hairLine,'hairLine':hairLine}" :style="{
		width:`${width}`,
		color:disabled?'#a0a0a0':textColor,
		borderColor:textColor,
		backgroundColor: bgColor,
		fontSize: `${fontSize}`,
	}" @tap="clickHandler">
		<slot></slot>
	</view>
</template>

<script>
	export default {
		props: {
			// 字体颜色
			textColor: {
				type: String,
				default: '#000'
			},
			// 背景色
			bgColor: {
				type: String,
				default: '#cdeeda'
			},
			// 镂空样式
			plain: {
				type: Boolean,
				default: false
			},
			// 按钮宽度
			width: {
				type: String,
				default: '30px'
			},
			// 字体大小
			fontSize: {
				type: String,
				default: 'inherit'
			},
			// 显示边框
			border: {
				type: Boolean,
				default: true
			},
			// 细边框
			hairLine: {
				type: Boolean,
				default: false
			},
			// 不可用
			disabled: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			clickHandler(e) {
				if (!this.disabled) {
					this.$emit('click', e)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn {
		min-width: 30px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		border-radius: 15px;
		border: 1px solid #cbcbcb;
		background-color: transparent;

		&::after {
			content: attr(data-str);
			position: relative;
			top: -5px;
			font-size: smaller;
		}
	}

	.btn+.btn {
		margin-left: 8px;
	}

	.noBorder {
		border: 0;
	}

	.hairLine {
		position: relative;

		&::after {
			content: "";
			position: absolute;
			pointer-events: none;
			// 设置为border-box，意味着下面的scale缩小为0.5，实际上缩小的是伪元素的内容（border-box意味着内容不含border）
			box-sizing: border-box;
			// 中心点作为变形(scale())的原点
			-webkit-transform-origin: 0 0;
			transform-origin: 0 0;
			left: 0;
			top: 0;
			width: 200%;
			height: 200%;
			transform: scale(.5);
			border: 1px solid currentColor;
			border-radius: 30px;
			z-index: 1;
		}
	}

	.plain {}
</style>
